<template>
<div class="index-classify">
    <div class="search">
        <van-search v-model="value" placeholder="请输入搜索关键词" show-action left-icon="search" right-icon="" >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>
    </div>
    <van-dropdown-menu :overlay="true">
        <van-dropdown-item title="分类" v-model="value1" :options="option1" @change="clickFL"/>
        <van-dropdown-item title="综合" v-model="value2" :options="option2" @change="clickZH"/>
        <van-dropdown-item title="品牌" v-model="value3" :options="option3" @change="clickPP"/>
    </van-dropdown-menu>
    <div class="height-12"></div>
    <div class="view-box">
		<van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="get_goods_list"
            >
            <div class="goods-item flex-center bgc-white p6 fz-12 van-hairline--bottom" v-for="(item, index) in goods_list" :key="index" @click="$router.push(`/product?id=${item.id}&type=${item.type}`)">
                
                <!-- <img src="item.cover_img" class="img" style="object-fit: contain;" alt=""> -->
                <van-image
                    class="img"
                    fit="contain"
                    :src="item.cover_img"
                    lazy-load
                />
                <div class="msg flex-1 text-left height100 p10 flex-column-space-between">
                    <p class="ellipsis-2">{{item.name}}</p>
                        <span class="mt4">品牌：{{item.brand_name}}</span> 
                    <div class="flex-center-space-between mt4 width100">
                        <p class="">库存数量：{{item.stock}}</p>
                        <div class="ml10"><van-icon name="location-o" />{{item.city}}</div>
                    </div>
                    <p> <van-tag type="danger" plain>{{item.ltd_level_name}}</van-tag> <span class="price blod fz-13" v-if="token">￥ {{item.price}}</span> <span class="price" v-else>会员认证可见</span> </p>
                </div>
            </div>
            <van-empty image="search" description="暂无商品" v-if="goods_list.length === 0"  />

        </van-list>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
			value:'',
            value1: '',
            value2: 'a',
            value3: 1,
			goods_list:[],
			param: {
                brand: this.$route.query.brand
            },
			token:this.$store.getters['user/userinfo'].token,
            option1: [
                
            ],
            option2: [
                { text: '综合', value: '' },
				{ text: '新品', value: 'new_in' },
                { text: '销量', value: 'best_seller' },
            ],
            option3: [
                
            ],
            loading: false, // 是否正在加载
            finished: false // 是否加载完所有数据， true 表示不在加载更多数据
        };
    },
	created: function() {
		
		this.getBaseInfo()
		this.get_goods_list()
	},
    methods: {
		clickFL (value) {
			console.log(value)
            // if (this.value1 !== '' && this.value1 === value) {
            //     this.value1 = ''
            // }
            this.goods_list = []
			this.param.cid = value
			this.get_goods_list()
		},
		clickZH (value) {
			console.log(value)
            this.goods_list = []
			this.param.check_type = value
			this.get_goods_list()
		},
		clickPP (value) {
			console.log(value)
            this.goods_list = []
			this.param.brand = value
			this.get_goods_list()
		},
		
		getBaseInfo:function(){
			const that = this
			this.$home.getHomeData('goods_cate').then(function(res){
				const data = res.data||{}
				
				data.select_list.map(function(item){
					that.option1.push({text:item.name,value:item.id})
				})
			})
			
			this.$home.getHomeData('goods_brand').then(function(res){
				const data = res.data||{}
				
				data.brand_list.map(function(item){
					that.option3.push({text:item.name,value:item.id})
				})
			})
		},
		
        onSearch () {
			
			this.param.keyword = this.value
			this.get_goods_list()
			
		},
		
		get_goods_list () {
			const that = this
			
			var param = {...that.param, is_up: this.$route.query.is_up, is_jx: this.$route.query.is_jx, ct_id: this.$route.query.ct_id}

            // console.log(param)
			
			that.$goods.getGoodsScreenList(param).then((res) => {
				const data = res.data||{}
				that.goods_list = data.list||[]
				if (this.goods_list.length === data.total) {
                    this.finished = true
                } else {
                    this.goods_list.push(data.list)
                }
			})
		},
    }
}
</script>

<style lang="less" scoped>
.search {
    height: 60px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    .van-search{
        width: 100%;
    }
}
.index-classify {
    min-height: 100vh;
    max-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    .view-box {
        flex: 1;
        max-height: 100%;
        overflow-y: auto;
        background-color: #fafafa;
    }
}

.goods-item {
    height: 136px;
    .img {
        width: 112px;
        height: 110px;
    }
}
</style>
